<template>
	<a-modal :confirmLoading="handing" width="540px" v-model:open="showForm" title="菜单编辑" @ok="submit">
		<a-form ref="form" :model="formData" :labelCol="{ span: 5 }" :wrapperCol="{ span: 16, offset: 1 }">
			<a-form-item name="name" label="名称">
				<a-input v-model:value="formData.name" placeholder="菜单名称" />
			</a-form-item>
			<a-form-item name="path" label="路径">
				<a-input v-model:value="formData.path" placeholder="菜单路径" />
			</a-form-item>
			<a-form-item name="title" label="菜单标题">
				<a-input v-model:value="formData.title" placeholder="菜单标题" />
			</a-form-item>
			<a-form-item name="pid" label="父级菜单">
				<a-tree-select
					placeholder="设置父级菜单"
					v-model:value="formData.pid"
					:tree-line="true"
					:treeData="[{value: 0, label:'---------'}].concat(menus)"
				>
					<template #notFoundContent>
						<div class="fjc">
							<LoadingOutlined />
						</div>
					</template>
				</a-tree-select>
			</a-form-item>
			<a-form-item name="icon" label="菜单图标">
				<IconSelector :column="6" :options="groupList" placeholder="请选择图标" mode="single" v-model:value="formData.icon" />
			</a-form-item>
			<a-form-item :name="formData.type" :wrapperCol="{ span: 21, offset: 1 }">
				<!-- <a-input v-model:value="formData.component" /> -->
				<a-input-group compact>
					<a-form-item-rest>
						<a-select v-model:value="formData.type" style="width: 106px" placeholder="选择类型">
							<a-select-option :value="1">页面组件</a-select-option>
							<a-select-option :value="2">iframe</a-select-option>
							<a-select-option :value="3">外链</a-select-option>
						</a-select>
					</a-form-item-rest>
					<a-input
						v-model:value="formData.component"
						placeholder="填写组件"
						addon-before="@/pages/"
						addon-after=".vue"
						style="width: calc(100% - 106px)"
					/>
				</a-input-group>
			</a-form-item>
			<a-form-item name="badge" label="菜单徽标">
				<a-input v-model:value="formData.badge" />
			</a-form-item>
			<a-form-item name="perm" label="权限校验">
				<a-tree-select
					tree-default-expand-all
					placeholder="设置对应权限"
					:tree-line="true"
					v-model:value="formData.perm"
					:treeData="[{value:'', label:'---------'}].concat(perms)"
				>
					<template #notFoundContent>
						<div class="fjc">
							<LoadingOutlined />
						</div>
					</template>
				</a-tree-select>
			</a-form-item>
			<a-form-item name="target" label="打开窗口">
				<a-radio-group :disabled="formData.type === 'link' || formData.type === 'iframe'" v-model:value="formData.target">
					<a-radio value="_self">当前窗口</a-radio>
					<a-radio value="_blank">新窗口</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item name="is_render" label="渲染菜单">
				<a-switch v-model:checked="formData.is_render" :checked-value="1" :un-checked-value="0" checked-children="是" un-checked-children="否" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import {page, form} from "@/mixins"
import * as icons from '@ant-design/icons-vue/es/icons'
import IconSelector, { IconSelectGroup, IconSelectOption } from '@/components/selector/IconSelector.vue';
import {useCacheStore} from '@/stores/cache'
import {mapState} from 'pinia'

  const iconList: IconSelectOption[] = [];
  const outlined: IconSelectGroup = {
    title: '线框风',
    key: 'outlined',
    list: [],
  };
  const filled: IconSelectGroup = {
    title: '实底风',
    key: 'filled',
    list: [],
  };
  const twoTone: IconSelectGroup = {
    title: '双色风',
    key: 'twoTone',
    list: [],
  };
	
 for (const key in icons) {
    const icon = {
      label: key,
      value: key,
      component: icons[key],
    };

    iconList.push(icon);
    if (key.endsWith('Outlined')) {
      outlined.list.push(icon);
    } else if (key.endsWith('Filled')) {
      filled.list.push(icon);
    } else if (key.endsWith('TwoTone')) {
      twoTone.list.push(icon);
    }
  }

  iconList.splice(100);

export default {
	mixins: [page, form],
	components: {IconSelector},
	data() {
		return {
			showForm: false as boolean,
			iconList: [] as IconSelectOption[],
			formPath: 'menu',
			groupList: [ outlined, filled, twoTone],
			formData: {
			  id: undefined,
				type: 1 as number,
			  name: '' as string,
			  title: '' as string,
			  icon: '' as string,
			  badge: '' as string,
			  target: '_self' as string,
			  path: '' as string,
			  component: '' as string,
			  is_render: 1,
			  pid: '' as string,
			  perm: '' as string,
			  cacheable: true,
			}
		}
	},
	computed: {
		...mapState(useCacheStore, ['menus', 'perms'])
	},
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				name: '',
				title: '',
				path: '',
				type: 1,
				pid: '',
				component: '',
				icon: '',
				is_render: 0,
				perm: '',
			})
			this.showForm = true;
		},
		edit(record : object) {
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		}
	}
}
</script>
